<template>
  <view class="container">
    <uni-grid :column="3" :show-border="false" :square="false">
      <uni-grid-item v-for="(item, index) in activityList" :index="index" :key="index">
        <view class="grid-item-box" :class="{ 'card-animate': showAnimation }"
          :style="'animation-delay:' + index * 0.1 + 's;'" @click="openCreatePopup(item)">
          <view class="thumbnail" :style="{ backgroundImage: 'url(' + item.url + ')' }"></view>
          <text class="text">{{ item.name }}</text>
        </view>
      </uni-grid-item>
    </uni-grid>

    <uni-popup ref="createInfoPopup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
      <view class="activityOpion">
        <view class="title">配置选项</view>
        <uni-segmented-control :current="current" :values="items" style-type="button" :active-color="activeColor"
          @clickItem="onClickItem" />
        <view class="content">
          <view v-if="current === 0">
            <uni-notice-bar text="当前创建的二维码仅可使用/提交一次，提交后此二维码会失效" />
          </view>
          <view v-if="current === 1">
            <uni-notice-bar text="当前创建的二维码可重复使用/提交多次，注：同一个用户也可能提交两次" />
          </view>
        </view>
        <uni-forms>
          <uni-forms-item label="阶段" required>
            <uni-data-select v-model="formData.stage" :localdata="stageName" placeholder="请选择阶段"></uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="姓名">
            <uni-easyinput v-model="formData.name" placeholder="请输入学生姓名" />
          </uni-forms-item>
          <uni-forms-item label="证件号">
            <uni-easyinput v-model="formData.name" placeholder="请输入学生证件号" />
          </uni-forms-item>
          <uni-forms-item>
            <button class="confirm" @click="confirmSelection" type="primary">生成二维码</button>
          </uni-forms-item>
        </uni-forms>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// 状态定义 -----------------------------------------------------------------
const loading = ref(false)
const showAnimation = ref(false) // 动画状态
const createInfoPopup = ref(null) // 弹出层实例
const current = ref(0) // 当前选项卡
const activeColor = ref('#007aff') // 选项卡激活颜色
const items = ref(['单次征集', '固定征集']) // 选项卡标题
const activityList = ref([
  {
    id: 1,
    name: '莫奈国际艺术奖活动',
    url: 'https://qd-webstatic.oss-cn-beijing.aliyuncs.com/lyxCertWechar/monai.jpg'
  },
  {
    id: 2,
    name: '莫比乌斯杯科技创新活动',
    url: 'https://qd-webstatic.oss-cn-beijing.aliyuncs.com/lyxCertWechar/mobius.jpg'
  },
  {
    id: 3,
    name: '长安长安美育系列活动',
    url: 'https://qd-webstatic.oss-cn-beijing.aliyuncs.com/lyxCertWechar/changanchangan.jpg'
  },
  {
    id: 4,
    name: '跃动杯青少年跳绳公开赛',
    url: 'https://qd-webstatic.oss-cn-beijing.aliyuncs.com/lyxCertWechar/yuedongbei.jpg'
  },
  {
    id: 5,
    name: '韶華杯青少年美育系列活动【新】',
    url: 'https://qd-webstatic.oss-cn-beijing.aliyuncs.com/lyxCertWechar/shaohuabei.jpg'
  },
])
const formData = ref({

}) // 表单数据
const stageName = ref([
  { "value": 0, "text": "省赛" },
  { "value": 1, "text": "国赛" }
]) // 阶段


// 生命周期钩子 -----------------------------------------------------------------
onMounted(() => {
  init()
})

onShow(() => {
  // 页面载入后，延时显示动画
  setTimeout(() => {
    showAnimation.value = true;
  }, 100);
})

onHide(() => {
  // 页面隐藏时，重置动画状态
  showAnimation.value = false;
})

// 方法定义 -----------------------------------------------------------------
const init = async () => {
  try {
    loading.value = true
    // 初始化逻辑
  } catch (error) {
    console.error(error)
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

const openCreatePopup = (activityItem) => {
  createInfoPopup.value.open()
}

const onClickItem = (e) => {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex
  }
}

const confirmSelection = () => {
  createInfoPopup.value.close();
  console.log('生成二维码成功')
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  padding: 30rpx;
  background-color: #f5f5f5;

  .grid-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
  }


  /* 缩略图样式 */
  .thumbnail {
    width: 150rpx;
    height: 150rpx;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 8px;
  }

  .text {
    font-size: 28rpx;
    color: #333;
    text-align: center;
  }

  .activityOpion {
    padding: 20rpx;
    padding-bottom: 0;

    .title {
      text-align: center;
      font-weight: bold;
      padding: 10rpx;
      margin-bottom: 40rpx;
    }

    .confirm {
      width: 100%;
      border-radius: 10rpx;
      background-color: #4b7dfa;
    }
  }
}


// 动画效果
.card-animate {
  opacity: 0;
  transform: translateY(20rpx);
  animation: fadeInUp 0.5s forwards;
}

.cancel-login {
  color: #2b92ff;
  text-align: center;
  letter-spacing: 5rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
  width: 100%;
  border-radius: 30rpx;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>